<script setup lang="ts" name="Welcome">
import {IconConfig} from '@/api/config'
import {BASE_TITLE} from '@/store/config'
import pageContainer from '@/components/pageContainer.vue'
import dIcon from '@/components/dIcon.vue'

const pageIcon1: IconConfig = {icon: 'welcome-home_1', type: 'custom', size: 138}
const pageIcon2: IconConfig = {icon: 'welcome-home_2', type: 'custom', size: 138}
const pageIcon3: IconConfig = {icon: 'welcome-home_3', type: 'custom', size: 138}
const pageIcon4: IconConfig = {icon: 'welcome-home_4', type: 'custom', size: 138}
const pageIcon5: IconConfig = {icon: 'welcome-home_5', type: 'custom', size: 138}
</script>

<template>
  <page-container>
    <div class="home-firstpage d-common-full d-common-flex-col d-common-flex-center">
      <div class="home-view-box">
        <div class="d-common-flex-row d-common-flex-start">
          <div class="filler-block" />
          <dIcon class="icon-block" :icon-config="pageIcon1" />
          <div class="filler-block" />
          <dIcon class="icon-block" :icon-config="pageIcon2" />
        </div>
        <div class="d-common-flex-row d-common-flex-center home-firstpage-title-box">
          <div class="home-firstpage-title">
            {{ BASE_TITLE }}
          </div>
          <div class="filler-block" />
          <dIcon class="icon-block" :icon-config="pageIcon3" />
        </div>
        <div class="d-common-flex-row d-comon-flex-justend">
          <dIcon class="icon-block" :icon-config="pageIcon4" />
          <div class="filler-block" />
          <dIcon class="icon-block" :icon-config="pageIcon5" />
        </div>
      </div>
    </div>
  </page-container>
</template>

<style scoped>
.home-firstpage {
  --home-frist-title-marin-top: 27px;
  --home-frist-title-color: var(--theme-color);
  --home-frist-title-foot-color: var(--d-font-color-assist);
}
.home-view-box{
  margin: auto;
}
.home-firstpage-title-box {
  margin: 26px 0;
}
.home-firstpage-title {
  text-align: center;
  margin-top: var(--home-frist-title-marin-top);
  color: var(--theme-color);
  width: 460px;
  font-size: 38px;
  font-family: Microsoft YaHei-Light, Microsoft YaHei;
  font-weight: bold;
  white-space: nowrap;
  margin: 0 23px 0 0;
}
.filler-block {
  width: 138px;
  height: 138px;
  background: #6ac4c9;
  border-radius: 10px;
  opacity: 0.36;
  margin-right: 23px;
}
.icon-block {
  margin-right: 23px;
  cursor: default;
}
</style>
